<template>
	<div class="custom-model" v-show="show">
		<masks v-show="show" @maskClick="hideModel"></masks>
		<transition name="animate-box">
			<div class="custom-model-info" v-show="show">
				<div class="custom-model-header">
					<div>{{title}}</div>
					<div class="close" @click="hideModel">&times;</div>
				</div>
				<div class="custom-model-content">
					<slot></slot>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	import { masksMixin } from 'common/js/mixins'

export default {
		mixins: [masksMixin],
		props: {
			title: {
				type: String,
				default: ''
			},
			isCancel: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				show: false
			}
		},
		methods: {
			showModel () {
				this.show = true
		},
			hideModel () {
				this.show = false
			if (!this.isCancel) {
					return
				}
				this.$emit('cancel')
		}
		}
	}
</script>

<style scoped lang="scss">
	@import '~common/scss/color';
	
	.custom-model {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		.custom-model-info {
			border-radius: 5px 5px 0 0;
			background-color: white;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 101;
			.custom-model-header {
				width: 100%;
				height: 40px;
				line-height: 40px;
				border-radius: 5px 5px 0 0;
				text-align: center;
				color: white;
				background-color: $color-default;
				position: relative;
				.close {
					position: absolute;
				    font-size: 21px;
				    right: 16px;
				    top: -1px;
				    cursor: pointer;
				}
				.close:hover {
					color: #999;
				}
			}
			.custom-model-content {
				width: 100%;
				height: calc(100% - 40px);
				overflow: hidden;
			}
		}
	}
</style>